<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Title</title>
</head>

<body>
    <div id="app">{{ message }}</div>
    <script src="../js/vue.js"></script>
    <script>
        // Promise是异步操作的的一种解决方案是一个构造函数需要new
        // 解决层层嵌套的回调地狱
        // 1、then什么时候执行
        // pending -> fulfilled时执行then的第一个回调函数
        // pending -> rejected时执行then的第二个回调函数
        // 2、then执行后的返回值
        // then执行之后返回一个新的Promise对象
        // 3、then方法返回Promise对象的状态改变
        // 默认返回的永远是成功的状态return 123会将返回值包装成一个Promise
        const p = new Promise((resolve, reject) => {
            resolve();
        });
        const p2 = p.then(
            () => {},
            () => {}
        );
        console.log(p, p2);
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好",
            },
        });
        // setTimeout(() => {
        //   console.log('setTimeout')
        //   console.log('setTimeout')
        //   console.log('setTimeout')
        //   setTimeout(() => {
        //     console.log('setTimeout')
        //     console.log('setTimeout')
        //     console.log('setTimeout')
        //     setTimeout(() => {
        //       console.log('setTimeout')
        //       console.log('setTimeout')
        //       console.log('setTimeout')
        //       setTimeout(() => {
        //         console.log('setTimeout')
        //         console.log('setTimeout')
        //         console.log('setTimeout')
        //       }, 1000)
        //     }, 1000)
        //   }, 1000)
        // }, 1000)
        new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("我大热");
                    resolve();
                }, 1000);
            })
            .then(() => {
                console.log("setTimeout");
                return new Promise((resolve, reject) => {
                    setTimeout(() => {}, 0);
                });
            })
            .then(() => {
                console.log("setTimeout");
            });
        //  一般情况下是有异步操作时使用promise对这个异步操作进行封装
        //  处理代码的时候放到then之后
        // 链式编程
        new Promise((resolve, reject) => {
                setTimeout(() => {
                    // 成功调用resolve
                    // 失败调用reject
                    // resolve()
                    reject("error message");
                });
            })
            .then((data) => {
                console.log(data);
            })
            .catch((err) => {
                console.log(err);
            });
    </script>
</body>

</html>